<template>
  <div class="execution">
    <basic-container>
      <div class="export-btn">
        <el-button icon="el-icon-download" round type="success" @click="downloadFile">导出汇总报告</el-button>
      </div>
      <div>
        <h4 class="title-list">SCA服务列表</h4>
        <avue-crud ref="crud" :data="scaData" :table-loading="scaLoading" :option="scaOption" @on-load="getScaList"
          @refresh-change="refreshScaChange" />
      </div>

      <div>
        <h4 class="title-list">SCA技术组件列表</h4>
        <avue-crud ref="crud" :data="skillData" :table-loading="skillLoading" :option="skillOption" @on-load="getSkillList"
          @search-change="searchSkillChange" @refresh-change="refreshSkillChange" @search-reset="resetScaTecp"/>
      </div>

      <div>
        <h4 class="title-list">IDE技术组件列表</h4>
        <avue-crud ref="crud" :page="page" :data="tableData" :table-loading="tableLoading" :option="tableOption"
          @on-load="getList" @search-change="searchChange" @refresh-change="refreshChange" @search-reset="searchReset"
          @size-change="sizeChange" @current-change="currentChange">
        </avue-crud>
      </div>

    </basic-container>
  </div>
</template>

<script>
  import {
    fetchList,
    fetchscaList,
    fetchscaTechList,
    doExport
  } from '@/api/admin/statistics'
  import {
    tableOption,
    scaOption,
    skillOption
  } from '@/const/crud/admin/statistics'

  export default {
    name: 'statistics',
    data() {
      return {
        searchForm: {},

        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        tableLoading: false,
        tableOption: tableOption,

        scaLoading: false,
        scaOption,
        scaData: [],

        searchSkillForm: {},
        skillLoading: false,
        skillOption,
        skillData: [],

      }
    },
    methods: {
      getList(page, params) {
        this.tableData = []
        this.tableLoading = true
        fetchList(Object.assign({
          descs: 'create_time',
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm)).then(response => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
      },
      getScaList(page, params) {
        this.scaData = []
        this.scaLoading = true
        fetchscaList().then(response => {
          this.scaData = response.data.data
          this.scaLoading = false
        }).catch(() => {
          this.scaLoading = false
        })
      },
      refreshScaChange() {
        this.getScaList({})
      },
      getSkillList(page, params) {
        this.skillData = []
        this.skillLoading = true
        if (params) {
          fetchscaTechList(params.serviceName).then(response => {
            this.skillData = response.data.data
            this.skillLoading = false
          }).catch(() => {
            this.skillLoading = false
          })
        } else {
          this.skillData = []
          this.skillLoading = false
        }

      },
      searchSkillChange(form, done) {
        this.searchSkillForm = form
        this.getSkillList({}, form)
        done()
      },
      refreshSkillChange() {
        this.getSkillList({})
      },
      resetScaTecp(){
         this.skillData = []
      },
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      searchReset() {
        this.searchForm = {}
        this.page.currentPage = 1
        this.getList(this.page)
      },
      refreshChange() {
        this.searchForm = this.form
        this.getList(this.page)
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      downloadFile() {
        // console.log('this.searchSkillForm',this.searchSkillForm.serviceName)
        if (!this.skillData.length){
          this.$message.error('SCA技术组件列表没有可导出的数据！')
          return false
        }
        doExport({server:this.searchSkillForm.serviceName}).then(response => {
          let url = window.URL.createObjectURL(new Blob([response.data]));

          var a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = '组件统计汇总.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        });
      },


    }
  }
</script>
<style scoped lang="scss">
  .export-btn{
    text-align: right;
  }
  .title-list {
    position: relative;
    margin: 0 0 15px;

    &:before {
      position: absolute;
      left: 0;
      top: 0;
      width: 3px;
      height: 10px;
      background-color: #333;
      /*background-color: $theme-color;*/
    }
  }
</style>
